<template>
	<!-- 会员管理 -->
	<view class="content">
		<!-- 自定义navbar -->
		<u-navbar back-text="首页"  :border-bottom="true" back-icon-size="40"
			:back-text-style="{ fontWeight: 600 }" height="44"></u-navbar>
		<view class="search-wapper" :style="{top: `0px`}">
		<!-- <view class="search-wapper" :style="{top: `${statusBarHeight + 44}px`}"> -->
			<view class="search">
			<uni-easyinput class="uni-mt-5" style="height:114px" suffixIcon="search" v-model="value" placeholder="请搜索会员" @iconClick="getFocus" />
				<!-- <view class="classify" @click="setScreen">
					<u-icon name="list" size="40"></u-icon>
				</view> -->
			</view>
		</view>
		<view class="list">
			<view v-for="(item,index) in memberLsit" :key="item.id">
			<view  class="item" >
				<view @click="showEdit(item,index)" class="top">		
					<view class="nickName">
					</view>
					<view class="item-A">
						<view>{{ item.name }} | {{ item.phoneNumber }}</view>
						<view @click="setScreen">
							<u-icon name="arrow-right" size="35"></u-icon>
						</view>
					</view>
					<view class="item-B">
						总充值：{{ item.totalChong }}
					</view>
					<view class="item-C">
						<view>总消费：{{ item.totalCost }}</view>
						<view>剩余积分：{{ item.rest }}</view>
					</view>
				</view>
					<transition name="fade">  
				<view v-if="item.isEdit" class="editCard">
					<view class="content">
						<text class="rest">{{ item.rest }}</text>
						<view class="select">
						<uni-data-select
      					v-model="jisuanFuHao"
      					:localdata="range"
      					@change="changeFuHao"
						  :clear="false"
    					></uni-data-select>
						</view>
						<input class="input" @click="clickInput(item,index)" @input="onInput" v-model="jianJiFen" @blur="blur($event,item)" @focus="focus" @change="changeValue(item.rest,index)" />
						<uni-data-select
						class="select"
      					v-model="danwei"
      					:localdata="danweiList"
      					@change="changeDanWei"
						  :clear="false"
    					></uni-data-select>
						<text>=</text>
						<text class="calRest">{{calRestJiFen}}</text>
						<!-- <text v-if="jisuanFuHao==0">{{ Number(item.rest) - Number(jianJiFen) }}</text>
						<text v-if="jisuanFuHao==1">{{ Number(Number(item.rest) + Number(jianJiFen)) }}</text> -->
					</view>
					<view class="footer">
						<!-- <navigator
						
							url="/pages/pointsRecord/pointsRecord"
						> -->
						<button @click="goJiFen" class="goJiFen">操作日志</button>
					<!-- </navigator> -->
						<button class="del" @click="del">删除会员</button>
					</view>
				</view>
			</transition>
			</view>
		</view>

		</view>
		<!-- <view class="dialog-box">
				<text class="dialog-text">输入内容：{{ value }}</text>
			</view> -->
			<!-- <button class="button" type="primary" @click="inputDialogToggle"><text
					class="button-text">输入对话框</text></button> -->
	</view>
</template>

<script lang="ts" setup>
import {ref,reactive,watchEffect} from 'vue'
import {onReady} from '@dcloudio/uni-app'
const background = ref('transparent')
const activeIndex = ref(0)
const searchVal = ref('')
const screenShow = ref( false)
const statusBarHeight = ref('')
const isEdit = ref(false)
const vModelValue = ref(0)
const jisuanFuHao = ref(0)
const jianJiFen = ref(0)//减的积分
const calRestJiFen = ref(0)//计算后剩余的积分
const danwei = ref(0)
const danweiList = [
		{ value: 0, text: "MOP",cal:1 },
        { value: 1, text: "￥",cal:1.1134 },
        { value: 2, text: "HKD",cal:1.0306},
        { value: 3, text: "$",cal:8.068 },
]
const isChildBlurred=ref(false)
const isCurrent = ref(true)
const range= [
        { value: 0, text: "—" },
        { value: 1, text: "+" },
      ]
const memberLsit = reactive([//会员列表数据
	{name:'张翠花',
	phoneNumber:'13022006633',
	totalChong:1200.00,
	totalCost:700.00,
	rest:500.00,
	isEidt:false,
	id:121212},
	{name:'李狗蛋',
	phoneNumber:'13022006633',
	totalChong:10.00,
	totalCost:1.00,
	rest:9.00,
	isEidt:false,
	id:12234512},
	{name:'隔壁老王',
	phoneNumber:'13022006633',
	totalChong:870.00,
	totalCost:70.00,
	rest:800.00,
	isEdit:false,
	id:12178812},
])
const changeFuHao =(e:any)=>{
	// console.log("e:", e);
}

// 设置动画
// 查看积分
const goJiFen = ()=>{
	if (isChildBlurred.value) {  
        // 如果子元素刚刚失去焦点，则不处理父元素的点击事件  
        isChildBlurred.value = false; // 重置标志位  
        return;  
      } 
	  uni.redirectTo({  
  url: '/pages/pointsRecord/pointsRecord'  
});
}
// 删除会员
const del = ()=>{
	if (isChildBlurred.value) {  
        // 如果子元素刚刚失去焦点，则不处理父元素的点击事件  
        isChildBlurred.value = false; // 重置标志位  
        return;  
      }  
	console.log('删除会员');
}
// 监听
watchEffect(()=>{
		let rest = Number(memberLsit[activeIndex.value].rest)
		let cal = danweiList.find(v=>v.value===danwei.value).cal
	if(jisuanFuHao.value==0){
		calRestJiFen.value = (rest-Number(jianJiFen.value)*cal).toFixed(2)
	}else if(jisuanFuHao.value==1){
		calRestJiFen.value = Number(Number(rest)+Number(jianJiFen.value)*cal).toFixed(2)
	}
	// }
	
})

const clickInput = (item,index)=>{
	activeIndex.value = index
}

const  onInput=(event)=> {
      // 使用正则表达式去除数字前的0
      jianJiFen.value = event.target.value.replace(/^0+([1-9]+)/, '$1');
    }
  

// 切换单位
const changeDanWei = (val) => {
}

// 点击显示/隐藏编辑栏
const showEdit = (item:any,index:any)=>{
	if (isChildBlurred.value) {  
        // 如果子元素刚刚失去焦点，则不处理父元素的点击事件  
        isChildBlurred.value = false; // 重置标志位  
        return;  
      }  
	jianJiFen.value = 0
	if(index!==activeIndex.value){
		memberLsit[activeIndex.value].isEdit = false
	}
	item.isEdit = !item.isEdit
	activeIndex.value = index
}
// 
const changeValue=(value:any,index)=> {
}
const blur=(e:any,item)=> {
	isChildBlurred.value = true
	if(jisuanFuHao.value==0){
      uni.showModal({
        title: '操作提示',
        content: `您确定要将会员${item.name}的积分减去${jianJiFen.value}?`,
        success: (res) => {
          if (res.confirm) {
            // 用户点击了确定按钮
			item.totalCost +=Number(jianJiFen.value)
			item.rest=calRestJiFen.value
			isChildBlurred.value = false
          } else if (res.cancel) {
            // 用户点击了取消按钮
			isChildBlurred.value = false
          }
        }
      });
	}
	if(jisuanFuHao.value==1){
		uni.showModal({
        title: '操作提示',
        content: `您确定要将会员${item.name}的积分增加${jianJiFen.value}?`,
        success: (res) => {
          if (res.confirm) {
            // 用户点击了确定按钮
			// item.totalCost +=jianJiFen.value
			item.rest=calRestJiFen.value
			item.totalChong +=Number(jianJiFen.value)
			isChildBlurred.value = false
          } else if (res.cancel) {
            // 用户点击了取消按钮
			isChildBlurred.value = false
          }
        }
      });
	}
	
    

}
const focus=(e:any)=> {
	// jianJiFen.value = ''
	// console.log('focus:', e);
}
const onPullDownRefresh=()=> {
		console.log('下拉刷新')
	}
const onReachBottom=()=> {
	console.log('触底了')
}
onReady(() =>{
    uni.getSystemInfo({//获取系统信息
        success: res => {
            statusBarHeight.value = res.statusBarHeight//状态栏的高度
			console.log(statusBarHeight.value)
        },
        fail(err) {
            console.log(err);
        }
    })
})
	/*点击搜索*/
const getFocus=()=> {
	console.log('点击搜索框')
	uni.navigateTo({
		url: '/pages/search-history/index'
	})
}
/*点击筛选*/
const setScreen=()=> {
	console.log('筛选')
	screenShow.value = true;
}
/*popup回调*/
// onclose((show)=> {
// 	screenShow.value = show
// })
</script>



<style lang="scss" scoped>
	.content {
		width: 100vw;
		background: #F8FAFF;
		box-sizing: border-box;
		padding: 0rpx 44rpx 184rpx 46rpx;//底部tabbar高度是184rpx
	}

	.content ::v-deep .u-icon-wrap u-icon {
		display: none;
	}

	.content ::v-deep .u-content {
		box-shadow: 0px 4px 16px 2px rgba(106, 106, 106, 0.2);
	}
	.search-wapper {
		height: 114rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: sticky;
		background-color: #F8FAFF;
		z-index: 100;
		// top: 0;
		// left: 20px;
	}

	.search {
		width: 100%;
		position: relative;
		// .uni-mt-5{
		// 	height: 114px;
		// }
		
	}

	.search ::v-deep .u-icon-wrap u-icon {
		display: inline-block;
	}

	.classify {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 100;
	}

	.list {
		width: 100%;
		box-sizing: border-box;
		flex: 1;
		position: relative;
		
		.nickName{
			position: absolute;
			// top: 0;
			right: 10px;
			width: 80px;
			height: 80px;
			background-color: pink;
			border-radius: 50%;
		}
		.item {
			width: 96%;
			// height: 220rpx;
			// background: #FFFFFF;
			box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(106, 106, 106, 0.2);
			border-radius: 36rpx;
			margin: 10rpx auto 30rpx;
			
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			.top{
				height: 220rpx;
				padding: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
				.item-A {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.item-B {}

			.item-C {
				display: flex;
				justify-content: space-between;
				align-items: center;

				>view {
					&:nth-child(2) {
						font-weight: 600;
						font-size: 24rpx;
						color: #e4b247;
						font-size: 24rpx;
					}
				}
			}
			}
		
		}
		.editCard{
			// height: 100px;
			border-top: 1px solid #ccc;
			padding-top:10px ;
			// margin-bottom: 40px;
			.content{
				margin: 0;
				padding: 0;
				padding: 0 30rpx;
				width: 100%;
				box-sizing: border-box;
				// background-color: pink;
				display:flex;
				// align-items: flex-end;
				font-size: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				.rest{
					color: #666;
				}
				.calRest{
					color: #e4b247;
				}
				.input{
					// background-color: skyblue;
					border: 1px solid #ccc;
					border-radius: 5px;
					width: 30%;
					text-align: center;
				}
			}
			.footer{
				// height: 100px;
				// background-color: pink;
				display: flex;
			align-items: center;
			justify-content: space-evenly;
			margin-top: 10px;
			.goJiFen{
				width: 41vw;
				flex: 1;
				// border-radius: 22.9px;
				background-color: rgb(206, 169, 91)	;			
				color:white;
			}
			.del{
				flex: 1;
				// border-radius: 22.9px;
				color:white;
				background-color: rgb(220, 27, 27);

			}
			}
		}
	}
	

  .uni-px-5 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .uni-pb-5 {
    padding-bottom: 10px;
  }
			 ::v-deep .uni-select {
					// font-size: 30px !important;
					width: 60px !important;
					text-align: center;
					border: none !important;
					height: 26.7px !important;
					
				}
				.select>	::v-deep .uni-select__input-text {
					height: 22px !important;
					display: flex;
					align-items: center;
				}
				.select>	::v-deep .uni-select__input-box {
					height: 26.7px !important;
					line-height: 26.7px;
					transform: translateY(-3px);
					// display: flex;
					// align-items: center;
				}
				.select> ::v-deep .uni-select__selector-item {
					height: 26.7px !important;
				}
				
				.text {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
  }
	::v-deep .is-input-border {
			height: 62px;
		}
	::v-deep .uni-easyinput__content-input{
		font-size: 20px;	
	}
	.example {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		height: 150px;
		background-color: #fff;
	}

	.example-body {
		padding: 10px 20px;
		padding-bottom: 0px;
	}



	.fade-enter-active, .fade-leave-active {  
  transition: opacity .5s;  
}  
.fade-enter, .fade-leave-to {  
  opacity: 0;  
}  
</style>



